// 此文件用于聊天时查看资料
<template>
  <div
    chat-infobox="666"
    class="userInfo"
    :class="isAddFriend ? 'addFriend' : ''"
    ref="userInfo"
    v-if="showUserDialog && userInfo"
    :style="{ left: userInfo_X + 'rem', top: userInfo_Y + 'rem' }"
  >
    <div class="infoContent">
      <div v-if="friendVerify" class="backLast flex-start">
        <img
          class="cp"
          :src="require('@/assets/message/upArrow.png')"
          @click="backLast"
          alt=""
        />
        <span>好友验证</span>
      </div>
      <div class="infoheader flex-start">
        <div class="infoavatar">
          <avatar :id="userInfo.user_id" :imgID="userInfo.user_img"></avatar>
        </div>
        <div class="infoname">{{ userInfo.user_name }}</div>
      </div>
      <div v-if="friendVerify" class="verifyContent">
        <p>申请添加好友</p>
        <textarea class="input" v-model="message" maxlength="100"></textarea>
        <span class="messageLength">{{ message.length }}/100</span>
      </div>
      <div v-else class="infodesc">
        <!-- <div v-if="friendVerify === true" class="verifyContent">
            <p>申请添加好友</p>
            <textarea class="input" v-model="message" maxlength="100"></textarea>
            <span class="messageLength">{{ message.length }}/100</span>
          </div> -->
        <div class="content">
          <p class="label">个人信息</p>
          <div class="info flex-start">
            <span class="key">姓名</span>
            <span class="value">{{ userInfo.user_name }}</span>
          </div>
          <div class="info flex-start">
            <span class="key">手机号</span>
            <span class="value">{{ userInfo.user_phone }}</span>
          </div>
          <div class="info " v-if="isFriend">
            <div class="showRemark flex-start" v-if="userInfo.remarks && userInfoType === 3">
              <span class="key">备注</span>
              <span class="value">{{ userInfo.remarks }}</span>
            </div>
            <div class="editRemark flex-start" v-if="userInfoType !== 3">
            <div class="key">备注</div>
            <div class="remarks flex-start" >
              <input
                type="text"
                placeholder="请输入"
                v-model="remarks"
                @blur="editRemark"
              />
              <img
                class="editremark"
                :src="require('@/assets/message/editRemark.png')"
                alt=""
              />
            </div>
            </div>
          </div>
          <div class="info flex-start" v-if="userInfoType === 2">
            <span class="key">验证消息</span>
            <span class="value">{{ userInfo.invitation_msg }}</span>
          </div>
        </div>
      </div>
      <footer v-if=" userInfoType < 3 && !tools.isSelf(userInfo.user_id)">
        <div v-if="isFriend" class=" flex-center">
          <div class="sendmsg btn" @click="sendMsg">发消息</div>
          <div class="videochat btn" @click="videoChat">视频通话</div>
        </div>
        <div v-else>
          <div v-if="userInfoType === 1">
            <div v-if="friendVerify" class="flex-center">
              <div class="sendAddInfo btn" @click="sendAddInfo">发送</div>
            </div>
            <div v-else class="flex-center">
              <div class="sendmsg btn" @click="addContact">添加联系人</div>
              <div class="videochat btn" @click="sendMsg">发消息</div>
            </div>
          </div>
          <div class=" flex-center" v-if="userInfoType === 2">
            <div class="sendmsg btn" @click="agreeApply(1)">同意</div>
            <div class="errorBtn btn" @click="agreeApply(2)">拒绝</div>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import { sendSock } from '../../../utils/socketSend'

export default {
  data () {
    return {
      userInfo_X: '',
      userInfo_Y: '',
      infoId: '',
      remarks: '',
      message: '',
      friendVerify: false // 添加好友时的状态
    }
  },
  watch: {
    showUserDialog: {
      handler (val) {
        if (!val) {
          // 组件隐藏时初始化
          this.userInfo_X = ''
          this.userInfo_Y = ''
          this.infoId = ''
          this.remarks = ''
          this.message = ''
          this.friendVerify = false
        }
      }
    }
  },
  computed: {
    // 搜索拿到的用户信息
    userInfo () {
      return this.$store.state.addressList.userInfo
    },
    // 是否为点击添加好友时显示的信息框
    isAddFriend () {
      return !this.infoId
    },
    // 是否为好友
    isFriend () {
      return this.userInfo.in_contact
    },
    // 显示/隐藏查看用户信息的弹框
    showUserDialog () {
      return this.$store.state.common.ifShowUserInfo
    },
    userInfoType () {
      // 用户信息框类型   1:点击头像   2:查看好友申请
      return this.$store.state.common.userInfoType
    }
  },
  methods: {
    setPosition (x, y) {
      // 设置资料框的位置
      this.userInfo_X = x
      this.userInfo_Y = y
    },
    setCurrentInfo (id) {
      // 点击头像获取到人物资料
      if (id) {
        // 对方
        this.infoId = Number(id)
        this.$store.commit('addressList/set_userInfo', {
          ...this.$store.state.chatInformation.userList[id],
          user_img: this.$store.state.chatInformation.userList[id].user_img_id,
          user_id: this.infoId
        })
        this.remarks = this.userInfo.remarks
      }
    },
    editRemark () {
      console.log(this.remarks)
      // 修改备注
      this.$store.dispatch('chatInformation/editRemark', {
        id: this.infoId,
        remarks: this.remarks
      })
    },
    // 发送消息
    sendMsg () {
      this.$store.commit('chatInformation/set_topContact', {
        id_type: 1,
        in_contact: this.tools.isFriend(this.userInfo.user_id),
        timestamp: +new Date(),
        messages: [],
        id: this.userInfo.user_id,
        name: this.userInfo.user_name,
        draft: ''
      })
      if (this.$router.path !== '/message') {
        this.$router.push('/message')
      }
      this.$store.commit('chatInformation/set_current_contact', {
        id: this.userInfo.user_id,
        id_type: 1,
        in_contact: this.userInfo.in_contact
      })
      this.$store.commit('common/set_ifShowUserInfo', false)
    },
    // 通过/拒绝好友申请
    agreeApply (requestState) {
      this.$store
        .dispatch('addressList/handleRequest', {
          invitationID: this.userInfo.invitation_id,
          invitationState: requestState
        })
        .then(res => {
          if (res.data && res.data.code === 200) {
            if (requestState === 2) {
              this.$store.dispatch('addressList/getFriendsRequestList')
              this.$store.dispatch('addressList/getRequestCount')
            }
            this.$store.commit('common/set_ifShowUserInfo', false)
          }
        })
    },
    addContact () { // 点击添加联系人后转到验证消息
      this.friendVerify = true
    },
    backLast () { // 点击返回到好友信息页
      this.friendVerify = false
    },
    sendAddInfo () { // 发送好友申请
      this.$store.dispatch('addressList/sendFriendRequest', { invitationTo: this.userInfo.user_id, invitationMsg: this.message }).then(res => {
        if (res.data && res.data.code === 200) {
          this.$message({
            type: 'info',
            message: '发送成功'
          })
          this.$store.commit('common/set_ifShowUserInfo', false)
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
      this.$store.commit('addressList/set_userInfo', {})
    },
    // 视频通话
    videoChat () {
      // 当前未进行发起通话
      if (!this.$store.state.common.ifShowVideoInvitation) {
        sendSock({
          type: '2.1.1',
          body: {
            id_type: 2,
            id: this.userInfo.user_id,
            timestamp: +new Date()
          }
        })
        // 设置消息reqID
        this.$store.commit('socket/set_operationReqId', 'sendCallReqId')
        this.$store.commit('common/set_ifShowUserInfo', false)
        this.$store.commit('addressList/set_userInfo', {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.userInfo {
  position: fixed;
  z-index: 999;
  width: 360px;
  height: 520px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px #d8dee9;
  padding: 0 30px;
  .infoContent {
    height: 100%;
    position: relative;
    .infoheader {
      padding-top: 32px;
      .infoavatar {
        width: 64px;
        height: 64px;
      }
      .infoname {
        margin-left: 16px;
        font-size: 18px;
        font-weight: 500;
        color: #0D172C;
      }
    }
    .backLast {
      padding-top: 20px;
      height: 45px;
      img {
        width: 18px;
        height: 18px;
        transform: rotateZ(-90deg);
      }
      span {
        margin-left: 8px;
        opacity: 1;
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #0D172C;
      }
    }
    .verifyContent {
      margin-top: 28px;
      position: relative;
      p {
        margin-top: 26px;
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #9eaac4;
        line-height: 17px;
        letter-spacing: 0px;
      }
      .input {
        border: none;
        margin-top: 12px;
        width: 300px;
        height: 148px;
        opacity: 1;
        background: #f6f7fb;
        border-radius: 2px;
        outline: none;
        padding: 12px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #0D172C;
        letter-spacing: 0px;
      }
      .messageLength {
        position: absolute;
        bottom: 12px;
        right: 12px;
        font-size: 12px;
        color: #5f7196;
      }
    }
    .infodesc {
      padding-top: 28px;
      .infotip {
        height: 25px;
        font-size: 12px;
        color: #9eaac4;
        line-height: 25px;
        border-bottom: 1px solid #ebedf3;
      }
      .content {
        .label {
          height: 25px;
          opacity: 1;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #9eaac4;
          line-height: 25px;
          border-bottom: 1px solid #ebedf3;
        }
        .info {
          margin-top: 25px;
          span {
            height: 20px;
            opacity: 1;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            line-height: 20px;
          }
          .key {
            width: 90px;
            color: #5f7196;
          }
          .value {
            color: #0D172C;
            width: 210px;
            word-break: break-word;
          }
          .remarks {
            input {
              background: transparent;
              height: 20px;
              width: 50px;
              color: #0D172C;
              border: none;
              line-height: 20px;
              font-size: 14px;
            }
            img.editremark {
              margin-left: 18px;
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
    footer {
      position: absolute;
      bottom: 30px;
      .btn {
        width: 142px;
        height: 40px;
        text-align: center;
        border-radius: 2px;
        line-height: 40px;
        font-weight: 400;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
      }
      .sendmsg {
        background: linear-gradient(316deg, #4a53ef, #6971fe 100%);
        color: #fff;
      }
      .videochat {
        margin-left: 16px;
        border: 1px solid #304eec;
        border-radius: 3px;
        color: #304eec;
      }
      .errorBtn {
        width: 142px;
        height: 40px;
        border: 1px solid #FF3E6D;
        background-color: #fff;
        color: #FF3E6D;
        margin-left: 16px;
      }
      .sendAddInfo {
        width: 300px;
        height: 40px;
        opacity: 1;
        background: linear-gradient(316deg, #4a53ef, #6971fe 100%);
        border-radius: 2px;
        opacity: 1;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
        line-height: 40px;
      }
    }
  }
}
.addFriend {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
</style>
